<template>
	<view class="title">近期热梗</view>
	<view class="out">
		<view class="list">
			<view v-for="(item, index) in list" :key="item.id">
				<view class="text">{{ index + 1 }}. {{ item.title }}</view>
				<view class="close" @click="onClose(index)">
					<icon type="clear" size="26" />
				</view>
			</view>
		</view>
		<view class="count">共{{ list.length }}条梗</view>
		<view class="commenet">
			<input type="text" placeholder="请输入热梗..." v-model="iptValue" @confirm="add()" />
			<button size="mini" type="primary" @click="add()" :disabled="!iptValue.length">
				发布
			</button>
		</view>
	</view>
	<view class="out">
		<input type="text" v-model="firstName" />
		<input type="text" v-model="lastName" />
		<view class="">全称：{{ fullName }}</view>
		<view class="">全称：{{ fullName }}</view>
		<view class="">全称：{{ fullName }}</view>
		<view class="">全称：{{ fullName() }}</view>
		<view class="">全称：{{ fullName() }}</view>
		<view class="">全称：{{ fullName() }}</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	const firstName = ref("");
	const lastName = ref("");
	// const fullName = computed(() => {
	// 	console.log("计算");
	// 	return firstName.value + "-" + lastName.value;
	// });
	const fullName = function() {
		console.log("方法");
		return firstName.value + "-" + lastName.value;
	};
	const list = ref([{
			id: 1,
			title: "刚满18岁",
		},
		{
			id: 2,
			title: "我不吃牛肉",
		},
		{
			id: 3,
			title: "遥遥领先",
		},
		{
			id: 4,
			title: "哪里贵",
		},
	]);

	const iptValue = ref("");

	function onClose(index) {
		list.value.splice(index, 1);
	}
	const add = function() {
		list.value.push({
			id: Date.now(),
			title: iptValue.value,
		});
		iptValue.value = "";
	};
</script>

<style lang="scss" scoped></style>